<script setup>
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { useRouter, useRoute } from 'vue-router';
import { queryPatientById } from '@/api/patientApi';
import { ref, onMounted } from 'vue';

const router = useRouter();
const route = useRoute();
const loading = ref(false);
const detailData = ref({});

function fetchDetail() {
    loading.value = true;
    queryPatientById({id: route.query.id})
        .then(res => {
            detailData.value = res.data;
        })
        .finally(() => {
            loading.value = false;
        });
}


function onBack() {
    router.go(-1);
}

onMounted(() => {
    fetchDetail();
})

</script>

<template>
    <div>
        <header class="header">
            <div class="back">
                <a-button @click="onBack">
                    <ArrowLeftOutlined #icon />
                    返回
                </a-button>
            </div>
            患者数据详情
        </header>
        <a-spin :spinning="loading">
            <a-descriptions bordered size="small">
                <a-descriptions-item label="登记号" :span="3">{{ detailData.admissionNumber || '/'}}</a-descriptions-item>
                <a-descriptions-item label="病案号" :span="3">{{ detailData.caseNumber || '/' }}</a-descriptions-item>
                <a-descriptions-item label="民族">{{ detailData.ethnicity === 1 ? '汉族' : '其他' }}</a-descriptions-item>
                <a-descriptions-item label="婚姻状况">{{ detailData.maritalStatus || '/'}}</a-descriptions-item>
                <a-descriptions-item label="性别">{{ detailData.gender || '/' }}</a-descriptions-item>
                <a-descriptions-item label="年龄">{{ detailData.age + ' 岁' }}</a-descriptions-item>
                <a-descriptions-item label="体格检查-身高">{{ detailData.height + ' CM' }}</a-descriptions-item>
                <a-descriptions-item label="体格检查-体重">{{ detailData.weight + 'KG' }}</a-descriptions-item>
                <a-descriptions-item label="既往史-过敏史" :span="3">{{ detailData.allergyHistory || '/'}}</a-descriptions-item>
                <a-descriptions-item label="个人史-嗜烟">{{ detailData.smokingHistory || '/' }}</a-descriptions-item>
                <a-descriptions-item label="嗜烟平均数（支）">{{ detailData.averageCigarettesPerDay ? `${detailData.averageCigarettesPerDay} 支` : '/' }}</a-descriptions-item>
                <a-descriptions-item label="嗜烟时间（年）">{{ detailData.smokingYears ? `${detailData.smokingYears} 年` : '/' }}</a-descriptions-item>
                <a-descriptions-item label="戒烟">{{ detailData.quitSmoking || '/' }}</a-descriptions-item>
                <a-descriptions-item label="戒烟时间（年）">{{ detailData.quitSmokingYears ? `${detailData.quitSmokingYears} 年` : '/' }}</a-descriptions-item>
                <a-descriptions-item label="嗜酒">{{ detailData.drinkingHistory || '/' }}</a-descriptions-item>
                <a-descriptions-item label="嗜酒平均数">{{ detailData.averageAlcoholPerDay ? `${detailData.averageAlcoholPerDay} g/日` : '/' }}</a-descriptions-item>
                <a-descriptions-item label="嗜酒时间">{{ detailData.drinkingYears ? `${detailData.drinkingYears} 年` : '/' }}</a-descriptions-item>
                <a-descriptions-item label="个人史-戒酒">{{ detailData.quitDrinking || '/' }}</a-descriptions-item>
                <a-descriptions-item label="个人史-戒酒时间">{{ detailData.quitDrinkingYears ? `${detailData.quitDrinkingYears} 年` : '/' }}</a-descriptions-item>
                <a-descriptions-item label="入院日期">{{ detailData.admissionDate || '/' }}</a-descriptions-item>
                <a-descriptions-item label="出院日期">{{ detailData.dischargeDate || '/' }}</a-descriptions-item>
                <a-descriptions-item label="入院科室">{{ detailData.admissionDepartment || '/' }}</a-descriptions-item>
                <a-descriptions-item label="当前科室名称" :span="2">{{ detailData.currentDepartment || '/' }}</a-descriptions-item>
                <a-descriptions-item label="入院诊断" :span="3">{{ detailData.admissionDiagnosis || '/' }}</a-descriptions-item>
            </a-descriptions>
        </a-spin>
    </div>
</template>

<style lang="less" scoped>
.header {
    width: 100%;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 14px;
    border-bottom: 1px solid #eee;
    position:relative;
    margin-bottom: 14px;

    .back {
        position: absolute;
        left: 0;
    }

}
</style>